<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
        <!--预加载-->
      <% for (let js of htmlWebpackPlugin.options.cdn.preload.js){ %>
      <link rel="preload" href="<%= js%>" as="stript">
      <% } %>

      <% for (let css of htmlWebpackPlugin.options.cdn.css){ %>
    <link rel="stylesheet" href="<%= css %>">
    <% } %>


      <style>
          .loading{
              width: 80px;
              height: 40px;
              margin: 0 auto;
              margin-top:350px;
          }
          .loading span{
              display: inline-block;
              width: 8px;
              height: 100%;
              border-radius: 4px;
              background: lightgreen;
              -webkit-animation: load 1s ease infinite;
          }
          @-webkit-keyframes load{
              0%,100%{
                  height: 40px;
                  background: lightgreen;
              }
              50%{
                  height: 70px;
                  margin: -15px 0;
                  background: lightblue;
              }
          }
          .loading span:nth-child(2){
              -webkit-animation-delay:0.2s;
          }
          .loading span:nth-child(3){
              -webkit-animation-delay:0.4s;
          }
          .loading span:nth-child(4){
              -webkit-animation-delay:0.6s;
          }
          .loading span:nth-child(5){
              -webkit-animation-delay:0.8s;
          }

      </style>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app">
            <!--   下面的结构 会在js没有下载完成之前显示
            当vue加载好之后，vue的结构会挂载到app上面，把这个结构替换掉-->
        <div class="loading">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>


    <% for (let js of htmlWebpackPlugin.options.cdn.js){ %>
    <script src="<%= js %>"></script>
    <% } %>
    <!-- built files will be auto injected -->
  </body>
</html>
